<!-- 律师列表详情-->
<template>
	<div class="lawerlist-content">
		<div class="head-content">
			<img v-if="detail.face" :src="$img + detail.face" class="headimg" />
			<img v-else src="../assets/images/vipbg.png" class="headimg" />
			<van-nav-bar title="" left-arrow @click-left="onClickLeft" />
			<!-- <div class="p-15"><van-icon name="arrow-left" /></div> -->
			<p class="lawer-name">
				<span>{{detail.name}}/{{detail.working_seniority}}年经验</span>
				<span v-if="detail.gold">金牌律师</span>
				<span>{{Number(detail.counsel_fee||0)}}元</span>
				<span style="color: #fff;">起</span>
			</p>
			<p class="company">{{detail.law_firm_name}}</p>
		</div>
		<div class="lawyer-content">
			<div class="about-content flex-start-center" v-if="detail.phone_state==1" @click="tell(detail.phone)">
				<p class="aboutL">联系电话</p>
				<div class="aboutR">
					{{detail.phone}}
				</div>
			</div>
			<div class="about-content flex-start-center" v-else @click="tell(agreement.phone)">
				<p class="aboutL">联系方式</p>
				<div class="aboutR" >
					联系客服
				</div>
			</div>
			<div class="about-content ">
				<div class="flex-start-center">
					<div class="aboutL">
										关于我
									</div>
									<div class="aboutR" v-if="detail.certificate_type">
										<span v-for="(item, index) in JSON.parse(detail.certificate_type)" :key="index">{{
					  item.name
					}}</span>
									</div>
				</div>
				
				<div class="introduce" v-if="intro.length">
					<template v-if="isShow">
						<span v-if="intro.length >= 120">
							{{ intro.substr(0, 120) }}
						</span>
						<span v-else>{{ intro }}</span>
						<span @click="show" v-if="intro.length >= 120" class="loadCss">...展开</span>
					</template>
					<template v-else>
						<span>
							{{ intro }}
						</span>
						<span @click="hide" class="loadCss">...收起</span>
					</template>
				</div>
			</div>
			<div class="trust-content">
				<p class="name">真实案例</p>
				<div v-for="(item, index) in trustArr" :key="index" @click="goTo(item)">
					<p class="title">{{ item.title }}</p>
					<p class="belief">{{ item.summary }}</p>
				</div>
			</div>
			
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				trustArr: [],
				// 是否展示所有文本内容
				isShow: true,
				intro: "",
				id:'',
				detail:{},
				agreement:{},
			};
		},
		methods: {
			async getSetup() {
				let [e, data] = await this.$store.dispatch('api/basicsSetupsApi');
				if (e) return;
				this.agreement = data
			},
			//拨打电话
			tell(phone){
				//拨打电话
				if(phone){
					let link = document.createElement('a');
					link.href = 'tel:' + phone;
					link.click()
				}
			},
			goTo(item){
				localStorage.setItem('detail',JSON.stringify(item))
				this.$router.push('/detail');
			},
			show() {
				this.isShow = false;
			},
			hide() {
				this.isShow = true;
			},
			onClickLeft() {
				this.$router.go(-1);
			},
			showTotalIntro() {
				console.log(this.showTotal);
				this.showTotal = !this.showTotal;
				this.exchangeButton = !this.exchangeButton;
			},
			//律师详情
			async getHistoryOne() {
				let [e, data] = await this.$store.dispatch('center/historyOneApi', {
					user_id: this.id, //关联用户id主键
				});
				if (e) return;
				this.detail = data;
				this.intro = data.description;
			},
			//律师离职
			async delLawyer() {
				let [e, data] = await this.$store.dispatch('lawyer/delLawyerApi', {
					user_id: this.id, //关联用户id主键
				});
				if (e) return;
				this.$toast('提交成功');
				setTimeout(()=> {
					this.$router.go(-1)
				},500);
			},
			//律师相关案例
			async lawyerCase() {
				let [e, data] = await this.$store.dispatch('center/lawyerCaseApi', {
					lawyerId: this.id, //关联用户id主键
				});
				if (e) return;
				this.trustArr = data;
			}
		},
		mounted() {
			window.scrollTo(0,0);
			this.getSetup();
			this.id = this.$route.query.id;
			if(this.id){
				this.getHistoryOne();
				this.lawyerCase();
			}
		},
	};
</script>
<style lang="less" scoped>
	.lawerlist-content {
		height: 100%;
		background: #fff;
	
		.head-content {
			width: 100%;
			height: 230px;
			position: relative;
	
			.headimg {
				object-fit: cover;
			}
	
			.van-nav-bar {
				position: absolute;
				top: 0;
	
				.van-icon-arrow-left {
					color: #fff;
				}
			}
	
			>img {
				height: 100%;
				width: 100%;
				object-fit: cover;
			}
	
			.lawer-name {
				position: absolute;
				top: 70%;
				width: 100%;
	
				>span:nth-of-type(1) {
					font-size: 18px;
					color: #ffff;
					font-weight: bold;
					margin-left: 4%;
				}
	
				>span:nth-of-type(2) {
					color: #fff;
					padding: 2px 4px;
					background: #f1cc9c;
					border-radius: 14px;
					margin-left: 4%;
				}
	
				>span:nth-of-type(3) {
					color: #fff;
					font-size: 20px;
					font-weight: bold;
					margin-left: 6%;
				}
			}
	
			.company {
				font-size: 14px;
				color: #fff;
				position: absolute;
				top: 85%;
				width: 94%;
				left: 6%;
			}
		}
	
		.lawyer-content {
			height: calc(100vh - 230px);
		}
	
		.about-content {
			width: 100%;
			background: #fff;
			padding-top: 30px;
	
			.aboutL {
				width: 20%;
				display: inline-block;
				color: #131a26;
				font-weight: bold;
				font-size: 15px;
				margin-left: 6%;
				vertical-align: top;
			}
			.phoneL{
				width: 20%;
			}
			
			.aboutR {
				width: 76%;
				display: inline-block;
				margin-left: 2%;
	
				>span {
					padding: 0.01rem 0.03rem;
					display: inline-block;
					margin-right: 3%;
					background: #f7f7f7;
					font-size: 10px;
					color: #3e86ff;
					text-align: center;
					margin-top: 4px;
	
					&:nth-of-type(4n) {
						margin-right: 0;
					}
				}
			}
			.phoneR{
				width: 71%;
				line-height: 32px;
			}
			.introduce {
				width: 80%;
				margin: 0 auto;
				margin-top: 24px;
				background: #f5f5f8;
				min-height: 122px;
				color: #757575;
				font-size: 14px;
				border-radius: 4px;
				padding: 10px 16px;
				overflow: auto;
				word-break: break-all;
	
				.loadCss {
					color: #3e86ff;
					font-size: 16px;
				}
	
				// display: -webkit-box;
				// overflow: hidden;
				// line-height: 25px;
				// -webkit-line-clamp: 5;
				// -webkit-box-orient: vertical;
			}
		}
	
		.trust-content {
			background: #fff;
	
			.name {
				color: #131a26;
				font-size: 18px;
				font-weight: bold;
				margin-left: 6%;
				margin-top: 12px;
				padding-top: 24px;
			}
	
			>div {
				width: 90%;
				margin: 0 auto;
				// padding:24px 16px 0;
				margin-top: 24px;
				margin-bottom: 10px;
				border: 1px solid #f2f2f2;
				border-radius: 4px;
	
				.title {
					color: #131a26;
					font-size: 14px;
					font-weight: bold;
					padding: 14px 16px 0;
				}
	
				.belief {
					color: #757575;
					font-size: 14px;
					width: 90%;
					margin: 0 auto;
					padding-top: 6px;
					padding-bottom: 6px;
					border-bottom: 1px solid #f5f5f5;
				}
	
				.evaluate {
					color: #a1a2a3;
					font-size: 14px;
					width: 90%;
					padding-top: 6px;
	
					margin: 0 auto;
				}
			}
		}
	}
</style>
